<template>
  <div class="tree">
    <el-card v-if="showCard" style="margin-top: 10px">
      <div class="top">
        <el-input v-model="roleName" placeholder="角色名称"></el-input>
        <el-button
          :disabled="!roleName"
          class="el-icon-search"
          @click="search"
          type="primary"
          round
          >查询</el-button
        >
        <el-button round :disabled="!roleName" @click="clean">清空</el-button>
      </div>
      <div class="bottom" style="margin: 20px">
        <el-button type="primary" @click="add">添加</el-button>
        <el-button type="danger" :disabled="!idList.length" @click="delAll"
          >批量删除</el-button
        >
        <el-table
          :data="listArr"
          border
          style="width: 70%"
          v-loading="loading"
          @selection-change="checkedChange"
          element-loading-text="Loading"
        >
          <el-table-column type="selection" width="120"></el-table-column>
          <el-table-column type="index" label="序号" width="120">
          </el-table-column>
          <el-table-column prop="roleName" label="角色名称" width="260">
            <!-- 修改操作 -->
            <template slot-scope="{ row, $index }">
              <div v-if="$index === showInputIndex">
                <el-input
                  placeholder="请输入内容"
                  v-model="name"
                  clearable
                  size="mini"
                >
                </el-input>
                <el-button @click="quxiao(row)" type="warning" size="mini" round
                  >取消</el-button
                >
              </div>

              <div v-else>{{ row.roleName }}</div>
            </template>

            <!-- 修改操作 -->
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="{ row, $index }">
              <el-button
                type="info"
                class="el-icon-info"
                size="mini"
                @click="info(row)"
              ></el-button>
              <el-button
                type="primary"
                class="el-icon-check"
                size="mini"
                :disabled="!($index === showInputIndex)"
                @click="sure"
              ></el-button>
              <el-button
                type="primary"
                class="el-icon-edit-outline"
                size="mini"
                @click="edit(row, $index)"
              ></el-button>
              <el-popconfirm
                confirmButtonText="确定"
                cancelButtonText="取消"
                icon="el-icon-info"
                iconColor="red"
                @onConfirm="del(row.id)"
                title="确定删除吗？"
              >
                <el-button
                  class="el-icon-delete"
                  size="mini"
                  slot="reference"
                  type="danger"
                ></el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-pagination
          layout="prev, pager, next, jumper,->,sizes,total"
          @size-change="changeSize"
          @current-change="changePage"
          :current-page="page"
          background
          :page-size="limit"
          :page-sizes="[5, 10, 15]"
          :total="total"
        >
        </el-pagination>
      </div>
      <!-- 对话框 -->
      <el-dialog title="添加角色" :visible.sync="show" width="35%">
        <el-form :model="form">
          <el-form-item label="角色名称">
            <el-input
              v-model="form.roleName"
              placeholder="请输入角色名称"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="show = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
    <el-card style="margin-top: 10px" v-else>
      <el-input class="input" v-model="input" size="mini" :disabled="true">
      </el-input>

      <el-tree
        :data="data"
        show-checkbox
        default-expand-all
        node-key="id"
        ref="tree"
        highlight-current
        :props="defaultProps"
      >
      </el-tree>

      <el-button @click="showCard = true" size="mini">取消</el-button>
      <el-button type="primary" @click="save1" size="mini">保存</el-button>
    </el-card>
  </div>
</template>

<script>
import {
  reqRoleList,
  reqAddOrUpdate,
  reqDel,
  reqDelAll,
  reqTree,
  reqAdd,
} from "@/api/tree";
export default {
  name: "index",
  components: {},
  data() {
    return {
      roleName: "",
      page: 1,
      limit: 5,
      loading: true,
      show: false,
      total: 0,
      listArr: [],
      form: { id: "", roleName: "" },
      showInputIndex: -1,
      name: "",
      idList: [],
      showCard: true,
      input: "",
      /* ************************************************************************************* */
      data: [],
      checkId: [],
      id: "",
      defaultProps: {
        label: "name",
      },
    };
  },
  methods: {
    async getList() {
      this.loading = true;
      try {
        const result = await reqRoleList(this.page, this.limit, this.roleName);
        // console.log(result);
        this.loading = false;
        this.listArr = result.data.items;
        this.total = result.data.total;
      } catch (error) {}
    },
    changePage(value) {
      // console.log(value);
      this.username = "";
      this.page = value;
      this.getList();
    },
    changeSize(value) {
      this.page = 1;
      this.limit = value;
      this.getList();
    },
    async search() {
      this.page = 1;
      this.getList();
      this.username = "";
    },
    clean() {
      this.roleName = "";
      this.page = 1;
      this.getList();
    },
    add() {
      this.form.roleName = "";
      this.show = true;
    },
    async save() {
      this.show = false;
      try {
        const result = await reqAddOrUpdate(this.form);
        this.changePage(this.form.id ? this.page : 1);
        this.$message.success(this.form.id ? "修改成功!" : "添加成功!");
        console.log(result);
      } catch (error) {
        this.$message.error(this.form.id ? "修改失败!" : "添加失败!");
      }
    },
    edit(row, index) {
      this.name = row.roleName;
      this.showInputIndex = index;
      this.form.id = row.id;
    },
    quxiao(row) {
      this.showInputIndex = -1;
      this.$message.warning("取消修改!");
    },
    sure() {
      this.form.roleName = this.name;
      this.showInputIndex = -1;
      this.save();
    },
    async del(id) {
      try {
        await reqDel(id);
        this.changePage(this.page);
        this.$message.success("删除成功!");
      } catch (error) {
        this.$message.error("删除失败!");
      }
    },
    checkedChange(e) {
      this.idList = e.map((item) => {
        return item.id;
      });
      console.log(this.checkedArr);
    },
    async delAll() {
      try {
        await reqDelAll(this.idList);
        this.changePage(this.page);
        this.$message.success("批量删除成功!");
      } catch (error) {
        this.$message.error("批量删除失败!");
      }
    },
    async info(row) {
      this.showCard = false;
      this.id = row.id;
      this.input = row.roleName;
      try {
        const result = await reqTree(row.id);
        this.data = result.data.children;
        // console.log(this.data);

        this.$nextTick(() => {
          this.$refs.tree.setCheckedKeys(
            this.getCheckedIds(result.data.children)
          );
          // console.log(this.data);
          // console.log(this.getCheckedIds(result.data.children));
        });
      } catch (error) {}
    },
    getCheckedIds(AllList, ids = []) {
      AllList.forEach((el) => {
        // console.log(el);
        if (el.select == true && el.level == 4) {
          ids.push(el.id);
        } else if (el.children) {
          this.getCheckedIds(el.children, ids);
        }
      });
      // console.log(ids);
      return ids;
    },
    async save1() {
      this.checkId = this.$refs.tree.getCheckedKeys();
      console.log(this.checkId);
      await reqAdd(this.id, this.checkId);
      this.showCard = true;
      this.changePage(this.page);
    },
    /* ********************************************************************88 */
  },
  mounted() {
    this.getList();
    this.showCard = true;
  },
};
</script>

<style scoped lang="scss">
.top {
  margin: 20px;
  .el-input {
    width: 200px;
  }
  .input {
    width: 100%;
    margin-bottom: 20px;
  }
  .el-button {
    margin: 0 20px;
  }
}
.el-table {
  margin: 20px 0;
}
.el-dialog {
  .el-input {
    width: 300px;
  }
}
.el-icon-edit-outline {
  margin-right: 10px;
}
.el-tree {
  padding: 20px 0;
}
</style>
